<template>
  <q-item class="comment-box no-padding-x">
    <q-item-main>
      <div class="row items-center size-14">
        <div class="col row items-center">
          <a-head :user="comment.user" :slogan="$q.screen.gt.md"></a-head>
        </div>
        <div>
          <div class="size-14 text-grey-6">{{ timesince(comment.add_date) }}</div>
        </div>
      </div>
      <div class="size-16 q-my-md">
        <blockquote v-if="comment.parent" class="text-grey-8 bg-grey-2 q-mb-md">
          <div v-if="!parentCollapsible" class="ellipsis size-16">{{ htmlToText(comment.parent.content) }}</div>
          <div v-if="parentCollapsible" class="size-16 img-center" v-html="getSanitizeHtml(comment.parent.content)">
          </div>
          <div class="row items-center">
            <div class="col"><small>{{ comment.parent.user.username }} {{ timesince(comment.parent.add_date) }}</small></div>
            <div><q-btn dense @click="parentCollapsible = !parentCollapsible" :icon="parentCollapsible ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"/></div>
          </div>
        </blockquote>
        <a-map-viewer v-if="map && comment.lat !== null && comment.lng !== null"
                      :key="comment.id"
                      :map="map"
                      height="30vh"
                      static-map
                      class="q-mb-md"
                      :comment="comment"></a-map-viewer>
        <div class="text-content" v-html="getSanitizeHtml(comment.content)">
        </div>
      </div>
      <a-text-input v-if="replyInput" autofocus :loading="comment.loading" title="回复" @close="replyInput = false" @submit="onSubmit"></a-text-input>
      <div v-else class="row items-center">
          <div class="col row items-center">
            <q-btn :color="comment.up ? 'primary' :  'grey-6'" dense  flat class="q-mr-sm" @click="upComment(comment.id)">
              <div class="row items-center"><q-icon name="thumb_up" class="size-18"/></div>
              <span v-if="(comment.up_number || up !== null) && up !== 0" class="q-ml-xs">{{ up !== null ? up : comment.up_number }}</span>
            </q-btn>
            <q-btn v-if="auth" color="grey-6" dense  flat @click="replyInput = true">
              <div class="row items-center"><q-icon name="reply" class="size-18"/></div>
            </q-btn>
            <!--<div v-if="index" class="size-14 text-grey-6 q-mr-md">{{ index }}楼</div>-->
          </div>
          <div>
          </div>
      </div>
    </q-item-main>
  </q-item>
</template>

<script>
    import {sanitizeHtml} from '../../utils/string'
    // import AMapViewer from '../components/map/MapViewer'

    export default {
      name: 'aCommentBox',
      components: {
        AMapViewer: function (resolve) {
          require(['../map/mapViewer'], resolve)
        }
      },
      props: {
        comment: {
          type: Object,
          required: true
        },
        map: {
          type: Object,
          required: false
        },
        index: {
          type: Number,
          required: false
        }
      },
      data(){
        return {
          replyInput: false,
          reply: '',
          up: null,
          parentCollapsible: false
        }
      },
      created(){
        this.$root.$on('toggleReplyInput', this.onReplyInputOpened)
      },
      watch: {
        replyInput (boolean) {
          if (boolean){
            this.$root.$emit('toggleReplyInput', this.index)
          }
        }
      },
      methods: {
        onReplyInputOpened(index){
          if (index !== this.index) {
            this.replyInput = false
          }
        },
        onSubmit(content){
          this.$emit('reply', {content, parentId: this.comment.id})
        },
        async upComment (id) {
          if (!this.auth){
            this.$router.push('/login')
          }

          const {status, data} = await this.postRequest({
            api: '/api/comment/{id}/up/',
            id
          })

          if (status === 200) {
            this.up = data.up_number
          } else {
            this.notify('error', '点赞发生错误，请稍后重试')
          }
        },
        getSanitizeHtml(html){
          return sanitizeHtml(html, [ 'img', 'i', 'p', 'blockquote', 'a', 'h2', 'ul', 'ol' ])
        },
        htmlToText(html){
          let text = html.replace(/<\/?.+?>/g, '')
          text = text.replace(/ /g, '')
          return text
        }
      }
    }
</script>

<style lang="stylus">
  .comment-box
    p
      margin 0 0 8px 0
</style>
